<!doctype html>  

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> 
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame 
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Boilerplate Test Suite</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!--  Mobile viewport optimized: j.mp/bplateviewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">


  <!-- CSS : implied media="all" -->
  <link rel="stylesheet" href="../css/style.css?v=2">
  <link rel="stylesheet" href="hack2.css">

  <!-- Uncomment if you are specifically targeting less enabled mobile browsers
  <link rel="stylesheet" media="handheld" href="../css/handheld.css?v=2">  -->
 
  <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
  <script src="../js/libs/modernizr-1.7.min.js"></script>

</head>

<body>

  <div id="container">
    
    
    <header>
				<br /><br /><h1>HTML5 Boilerplate CSS Hack Sheet</h1><br /><br />
    </header>
  
    
    <div id="main" style="display:block;">
			<dl>
				<dt>Hack 01 - Set default color</dt>
					<dd>
						HTML5 Boilerplate suggests the default color looks better when set to #444 instead of #000.<br />
						<span style="color:black;">Web font default color</span>
					</dd>
				
				<dt>Hack 02 - Vertical Scroll Bar</dt>
					<dd>
						Click <a href="#" id="shorten">contract</a> | <a href="#" id="expand">expand</a> to see how Boilerplate forces a scrollbar in non-IE.
					</dd>

				<dt>Hack 03 - Accessible focus style</dt>
					<dd>
						Remove dotted outline around 'a' element on hover and on focus in certain browsers
						<br /><br />
						<span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
						<br /><br />
						<a href="#" class="preventDefault">Click me</a>
					</dd>
			
				<dt>Hack 04 - Pre Wrapping</dt>
					<dd>
						Default <code>pre</code> doesn't wrap text. Boilerplate forces <code>pre</code> to wrap text.
						<br /><br />
						<span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
						<br /><br />
						with wrapping:<br /><br />
						<div style="height:115px;">
  						<div class="wrapper">
  						  <pre>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</pre>
  						</div>
						</div><br />
						without wrapping:<br /><br />
						<div class="wrapper">
							aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
						</div>
					</dd>
					
				<dt>Hack 05 - Remove default textarea scrollbar in IE</dt>
					<dd>                 
					  IE shows a disabled scrollbar on empty <code>textarea</code>.<br><br>
						<span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
						<br /><br />
						<form>
							<textarea></textarea>
						</form>
					</dd>				
			
				<dt>Hack 06 - IE6,7 legend margin</dt>
					<dd>
						Left align form legend to the inner text in IE 6,7.<br /><br />
						<span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
						<br /><br />
						<form>
							<fieldset>
								<legend>Information:</legend><br />
								Name: <input type="text" size="30" /><br />
								Email: <input type="text" size="30" /><br />
								Date of birth: <input type="text" size="10" />
							</fieldset>
						</form>
					</dd>
				
				<dt>Hack 07 - Vertically align checkboxes, radios, text inputs with their label</dt>
					<dd>
						<span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
						<br /><br />
						<input type="radio" /> Option A <br /><br />
						<input type="checkbox" /> Item B <br /><br />
						Name: <input type="text" />
					</dd>
						
				<dt>Hack 08 - Hand cursor on clickable input elements</dt>
					<dd>
						<span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
						<br /><br />
						Input with type submit <input type="submit" value="submit" />
					</dd>
					
					
				<dt>Hack 09 - Webkit browsers form elements margin</dt>
					<dd>
						Webkit browsers add a 2px margin outside the chrome of form elements.<br /><br />
						<span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
						<br /><br />
						<form>
						<input type="submit" value="submit" /><br /><br />
						<button type="button">Click Me!</button><br /><br />
						<select><option>Default</option></select>
						</form>
					</dd>
					
				<dt>Hack 10 - Make buttons width rendered correctly</dt>
					<dd>
						IE adds extra padding to <code>button</code>. This fixes the issue. <br /><br />
						<span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
						<br /><br />
						<form>
							<button type="button">Click Me!</button>
							<button type="button">This is a really long button</button>
						</form>
					</dd>
				
				<dt>Hack 11 - Bicubic resizing for non-native sized IMG</dt>
					<dd>
						IE7 hack to reduce distortion caused by image resizing <br /><br />
						<span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
						<br /><br />
						<img src="../apple-touch-icon.png" width="27" /><br />
						<img src="../apple-touch-icon.png" width="57" /><br />
						<img src="../apple-touch-icon.png" width="157" /><br />
					</dd>
				
				<dt>Hack 12 - Hide visually</dt>
					<dd>
						Hide elements visually, but have it available for screen readers.
						<br /><br />
						<span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
						<br /><br />
						<div class="visuallyhidden">showing</div>
					</dd>
				
				<dt>Hack 13 - Image text replacement</dt>
					<dd>
						Replace text with images. 
						<br /><br />
						<span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
						<br /><br />
						
						<div class="ir" style="background:url('../apple-touch-icon.png'); width:57px; height:57px;">Apple Touch Icon</div>
						
					</dd>	

				<dt>Hack 14 - Clear Floats</dt>
					<dd>
						Clear Floated elements without extra markup. 
						<br /><br />
						<span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
						<br /><br />
						<div id="clear-demo" class="clearfix">
							<div id="clear-demo-l">text floated left</div><div id="clear-demo-r">text floated right</div>
						</div>
						<div id="clear-demo-b">unfloated text</div>
					</dd>	
					
					
					<dt>Hack 15 - PNG fix</dt>
					<dd>fix pngs for correct display in IE6
					  <br /> <br />

					<div style="position:relative">
						
						<!-- wassup gradient. -->
						<div style="
							position:absolute; height: 40px; background-color: #444444; background-image: -moz-linear-gradient(top, #444444, #999999);
							background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999));
							filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');
						">
						  
							<div class="png_bg" style="
								border:1px solid #ddd; width:100px; padding:10px 10px 10px 50px;
								display:inline-block; background:url(test_tubes.png) no-repeat 5px center;
							">
								<img src="internet_explorer.png" alt="IE is so awesome" />
							</div>
						</div>
					</div>					  
				</dd>	
			</dl>
    </div>
    <footer>

    </footer>
  </div> <!--! end of #container -->


  <!-- Javascript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery. fall back to local if necessary -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
  <script>!window.jQuery && document.write(unescape("%3Cscript src='../js/libs/jquery-1.5.0.js'%3E%3C/script%3E"))</script>


  <script>
    $("#expand").click(function() {
      $("#container").css("height","auto").css("overflow","");
			return false;
    });
		
		$("#shorten").click(function() {
      $("#container").css("height","300px").css("overflow","hidden");
			return false;
    });
		
		$("#atag").click(function() {
			return false;
    });
		
		$(".show").click(function(){
		  $(".show").addClass("current")
		  $(".hide").removeClass("current");
			showStyle();
			return false;
		});
		$(".hide").click(function(){
		  $(".hide").addClass("current")
		  $(".show").removeClass("current");
		  // freeze the size of each tests so the page doesnt jump.
		  $("dd").each(function(){
        $(this).height( $(this).height() );
      });
      
			hideStyle();
			return false;
		});
		
		var linkTags = $("link");
		function hideStyle() {
		  // tee hee
			$("link[href*='style.css']").attr("media","braille");
		}
		function showStyle() {
			$("link[href*='style.css']").attr("media","all");
		}
		
		$(".preventDefault").click(function() {
			return false;
		});
		
		$(function(){
		  $(".show").addClass("current");
		})
  </script>


  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
  <script>window.jQuery || document.write("<script src='../js/libs/jquery-1.5.1.min.js'>\x3C/script>")</script>


  <!-- scripts concatenated and minified via ant build script-->
  <script src="../js/plugins.js"></script>
  <script src="../js/script.js"></script>
  <!-- end scripts-->


  <!--[if lt IE 7 ]>
    <script src="../js/libs/dd_belatedpng.js"></script>
    <script> DD_belatedPNG.fix("img, .png_bg"); //fix any <img> or .png_bg background-images </script>
  <![endif]-->


  <!-- mathiasbynens.be/notes/async-analytics-snippet Change UA-XXXXX-X to be your site's ID -->
  <script>
    var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
    g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
    s.parentNode.insertBefore(g,s)}(document,"script"));
  </script>

  </body>
  </html>
